<template>
    <div class="roleManage">
        <el-table :data="tableData" border :span-method="objectSpanMethod">
            <el-table-column v-for="(item, i) in titleData" :key="i" :prop="item.name" :label="item.label"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "RoleManage",
    data () {
        return {
            spanAll: [],
            titleData: [
                { name: 'col1', label: 'aaa' },
                { name: 'col2', label: 'bbb' },
                { name: 'col3', label: 'ccc' },
                { name: 'col4', label: 'ddd' }
            ],
            tableData: [
                { col1: 1 , col2: 2, col3: 3, col4: 4 },
                { col1: 1 , col2: 2, col3: 4, col4: 4 },
                { col1: 6 , col2: 2, col3: 7, col4: 5 },
                { col1: 5 , col2: 4, col3: 7, col4: 9 }
            ],
            books: [
                { isbn: 123, mwId: 456789, id: 1, name: "张三", num: "1", stock: 3 },
                { isbn: 485, mwId: 485754, id: 2, name: "李四", num: "5", stock: 2 },
                { isbn: 123, mwId: 456789, id: 3, name: "王五", num: "2", stock: 1 },
                { isbn: 475, mwId: 421535, id: 4, name: "赵六", num: "3", stock: 3 },
                { isbn: 254, mwId: 152346, id: 5, name: "钱七", num: "1", stock: 2 },
                { isbn: 123, mwId: 456789, id: 6, name: "杨八", num: "5", stock: 15 },
                { isbn: 254, mwId: 152346, id: 7, name: "周九", num: "1", stock: 2 }
            ]
        }
    },

    methods: {
        flitterData(arr){
            let spanOneArr = []
            let concatOne = 0

            arr.forEach((item,index) => {
                if(index === 0){
                    spanOneArr.push(1);
                }else{
                    //name 修改
                    if(item.col1 === arr[index - 1].col1){ //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1;
                        spanOneArr.push(0);
                    }else{
                        spanOneArr.push(1);
                        concatOne = index;
                    };
                }
            });

            return  {
                one: spanOneArr,
            }
        },

        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if(columnIndex === 0 ) {
                // this.tableData  修改
                const _row = (this.flitterData(this.tableData).one)[rowIndex];
                const _col = _row > 0 ? 1 : 0;

                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
        },

        init () {
            let arr = [
					{ isbn: 123, mwId: 456789, id: 1, name: "张三", num: "0", stock: 1 },
					{ isbn: 485, mwId: 485754, id: 2, name: "李四", num: "5", stock: 2 },
					{ isbn: 123, mwId: 456789, id: 3, name: "王五", num: "0", stock: 1 },
					{ isbn: 475, mwId: 421535, id: 4, name: "赵六", num: "3", stock: 3 },
					{ isbn: 254, mwId: 152346, id: 5, name: "钱七", num: "1", stock: 2 },
					{ isbn: 123, mwId: 456789, id: 6, name: "杨八", num: "6", stock: 10 },
					{ isbn: 254, mwId: 152346, id: 7, name: "周九", num: "1", stock: 2 }
				];

			const arrs = this.getBooks(arr, (item) => {
                return [item.isbn, item.mwId];// 按照isbn,mwId进行分组
            });

            let sortArr = arrs.forEach((item, index) => {
            	if (item.length > 1) {
            		console.log(item)
            	}
            })
            
        },

        // 相同书进行分组
		getBooks (array, f) {
            const groups = {};

            array.forEach((o) => {
                const group = JSON.stringify(f(o));

                groups[group] = groups[group] || [];
                groups[group].push(o);
            });

            return Object.keys(groups).map((group) => {
                return groups[group];
            }); 
        },
    },

    created () {
        this.init();
    }
}
</script>
